import './index.less';
import { useState, useEffect } from 'react';
export default function IndexPage() {
  let data = [
    '候宇航',
    '陈建鹏',
    '常鹏',
    '李雨恒',
    '赵家兴',
    '赵金波',
    '刘金金',
    '王怡腾',
    '周铮铮',
    '常谭飞',
    '赵晗琪',
    '李博阳',
    '陈亚东',
    '柴晓静',
    '冯晓雯',
    '王烨',
    '唐洪洋',
    '贾岳杰',
    '王天林',
    '秦亚凯',
    '刘恒谊',
    '卢阳',
    '赵苗苗',
    '田嘉玲',
    '何旭',
    '白亚楠',
    '蒋依琳',
    '刘闯',
    '范晓涵',
    '栗鹏杰',
    '尚泽',
    '韩永强',
    '黄永胜',
    '陈雪谊',
    '冯子康',
    '赵林辉',
    '刘津芳',
  ];
  useEffect(() => {
    localStorage.setItem(
      'list',
      JSON.stringify([
        '候宇航',
        '陈建鹏',
        '常鹏',
        '李雨恒',
        '赵家兴',
        '赵金波',
        '刘金金',
        '王怡腾',
        '周铮铮',
        '常谭飞',
        '赵晗琪',
        '李博阳',
        '陈亚东',
        '柴晓静',
        '冯晓雯',
        '王烨',
        '唐洪洋',
        '贾岳杰',
        '王天林',
        '秦亚凯',
        '刘恒谊',
        '卢阳',
        '赵苗苗',
        '田嘉玲',
        '何旭',
        '白亚楠',
        '蒋依琳',
        '刘闯',
        '范晓涵',
        '栗鹏杰',
        '尚泽',
        '韩永强',
        '黄永胜',
        '陈雪谊',
        '冯子康',
        '赵林辉',
        '刘津芳',
      ]),
    );
  }, []);
  useEffect(() => {
    localStorage.setItem('list1', JSON.stringify([]));
  }, []);

  var list1: any = JSON.parse(localStorage.getItem('list'));
  let isStrat = true;
  let timer: any = null;
  let vle: any = '';
  const [st1, st2] = useState('');
  const [sst1, sst2] = useState([]);
  const dm2 = (e: any) => {
    if (list1.length > 0) {
      if (isStrat) {
        isStrat = false;
        e.target.value = '结束';
        timer = setInterval(function () {
          var num = parseInt(Math.random() * list1.length);
          e.target.value = list1[num];
          // st2(list1[num])
          vle = list1[num];
        }, 30);
      } else {
        var lists = JSON.parse(localStorage.getItem('list1'));
        lists.push(vle);
        console.log(lists);

        localStorage.setItem('list1', JSON.stringify(lists));
        isStrat = true;
        var index = list1.indexOf(e.target.value);
        list1.splice(index, 1);
        localStorage.setItem('list', JSON.stringify(list1));
        sst2(lists);
        e.target.value = '开始';
        clearInterval(timer);
        st2(vle);
      }
    } else {
      localStorage.setItem('list1', JSON.stringify([]));
      sst2([]);
      localStorage.setItem(
        'list',
        JSON.stringify([
          '候宇航',
          '陈建鹏',
          '常鹏',
          '李雨恒',
          '赵家兴',
          '赵金波',
          '刘金金',
          '王怡腾',
          '周铮铮',
          '常谭飞',
          '赵晗琪',
          '李博阳',
          '陈亚东',
          '柴晓静',
          '冯晓雯',
          '王烨',
          '唐洪洋',
          '贾岳杰',
          '王天林',
          '秦亚凯',
          '刘恒谊',
          '卢阳',
          '赵苗苗',
          '田嘉玲',
          '何旭',
          '白亚楠',
          '蒋依琳',
          '刘闯',
          '范晓涵',
          '栗鹏杰',
          '尚泽',
          '韩永强',
          '黄永胜',
          '陈雪谊',
          '冯子康',
          '赵林辉',
          '刘津芳',
        ]),
      );
      list1 = JSON.parse(localStorage.getItem('list'));
    }
  };
  return (
    <div className="b1">
      <div className="box">
        <input type="text" value={st1 ? st1 : '点名系统'} />
        <input
          type="button"
          value="开始"
          onClick={(e) => {
            dm2(e);
          }}
        />
      </div>
      <ul>
        {sst1.map((item, index) => {
          return <li key={index}>{item}</li>;
        })}
      </ul>
    </div>
  );
}
